<template>
  <div id="navgation">
    <div class="time-nav nav">
      <router-link
        v-for="item in timeNavList"
        :to="item.path"
        @click="() => (store.todo = undefined)"
        :class="
          route.path === item.path ? 'time-nav-item nav-item active' : 'time-nav-item nav-item'
        "
        :key="item.path"
      >
        <div class="nav-item-text">
          <i :class="item.icon"></i>
          <span class="text">{{ item.text }}</span>
        </div>
        <div class="nav-item-count">
          <span class="count">{{ store.getTodoGroupCount(item.text) }}</span>
        </div>
      </router-link>
    </div>
    <div class="task-nav nav">
      <div class="expand-button task-nav-item nav-item">
        <div class="tip">清单</div>
        <div @click="handleAddTodoNav" class="add-todo-nav">＋</div>
      </div>
      <div
        v-for="item in store.todoNavList"
        :class="
          route.query.list === item.name
            ? 'time-nav-item nav-item active'
            : 'time-nav-item nav-item'
        "
        :key="item.path"
        @click="handleTodoNavClick(item)"
        @contextmenu="showRightMenu($event, item)"
      >
        <div class="nav-item-text">
          <i v-if="!item.icon" class="ri-list-check"></i>
          <span class="icon" v-else>{{ item.icon }}</span>
          <span class="text">{{ item.name }}</span>
        </div>
        <div class="nav-item-count">
          <span class="count">{{ store.getTodoGroupCount(item.name) }}</span>
        </div>
      </div>
      <NavRightMenu @action="handleMenuAction" ref="navRightMenuRef"></NavRightMenu>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavRightMenu from '@renderer/components/rightMenu/NavRightMenu.vue'
import todoStore from '@renderer/store/todo'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const store = todoStore()
const router = useRouter()

const currentNavItem = ref<TodoNavItem | undefined>(undefined)

const navRightMenuRef = ref<InstanceType<typeof NavRightMenu> | null>(null)

const timeNavList = [
  {
    text: '今天',
    icon: 'ri-calendar-check-line',
    path: '/today'
  },
  {
    text: '最近7天',
    icon: 'ri-calendar-todo-line',
    path: '/week'
  },
  {
    text: '收集箱',
    icon: 'ri-inbox-2-line',
    path: '/collect'
  },
  {
    text: '已完成',
    icon: 'ri-checkbox-line',
    path: '/done'
  },
  {
    text: '垃圾桶',
    icon: 'ri-delete-bin-line',
    path: '/trash'
  }
]

const handleTodoNavClick = (navItem: TodoNavItem) => {
  store.todo = undefined
  router.push({
    path: '/list',
    query: {
      list: navItem.name
    }
  })
}

const handleAddTodoNav = () => {
  window.api.addTodoNav()
}

const showRightMenu = (event: MouseEvent, navItem: TodoNavItem) => {
  event.preventDefault()
  event.stopPropagation()
  currentNavItem.value = navItem
  if (navRightMenuRef.value) {
    navRightMenuRef.value.showMenu(event)
  }
}

const handleMenuAction = (action: string) => {
  switch (action) {
    case 'edit':
      window.api.addTodoNav()
      window.electron.ipcRenderer.once('getEditTodoNavData', () => {
        if (currentNavItem.value) {
          window.api.sendTodoNavData({
            ...currentNavItem.value
          })
        }
      })
      break
    case 'delete':
      if (currentNavItem.value) {
        window.api.deleteTodoNavData(currentNavItem.value.id)
        store.getTodoNavList()
        store.pullData()
        router.push({
          path: '/today'
        })
      }
      break
    case 'copy':
      // window.api.copyTodoNav(currentNavItem.value)
      break
    default:
      break
  }
}
</script>

<style scoped lang="scss">
#navgation {
  height: 100%;
  min-width: 220px;
  width: 220px;
  border-right: 1px solid var(--xz-card-border);
  background-color: var(--xz-card-bg);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;

  .nav {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid var(--xz-card-border);
    gap: 4px;
  }

  .nav-item {
    width: 100%;
    padding: 5px 10px;
    border-radius: var(--xz-main-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;

    &:hover {
      background: var(--xz-theme);
      color: var(--xz-card-bg);
    }

    &.active {
      background: var(--xz-theme);
      color: var(--xz-card-bg);
    }

    .nav-item-count {
      font-size: 0.8rem;
      font-weight: 450;
    }

    .nav-item-text {
      display: flex;
      align-items: center;
    }

    i,
    .icon {
      font-size: 1.2rem;
      margin-right: 8px;
    }

    .text {
      font-weight: 450;
      font-size: 0.9rem;
    }

    .nav-item-text,
    .nav-iten-count {
      display: flex;
      align-items: center;
    }

    .nav-item-count {
      .count {
        font-size: 12px;
        font-weight: bold;
        color: var(--xz-orange);
      }
    }
  }

  .time-nav {
    .time-nav-item:last-child {
      margin-bottom: 15px;
    }
  }

  .task-nav {
    padding: 20px 0;

    .expand-button {
      margin-bottom: 5px;

      .tip {
        font-size: 0.8rem;
        color: var(--xz-fontcolor);
      }

      .add-todo-nav {
        opacity: 0;
      }

      &:hover {
        .tip {
          color: var(--xz-white);
        }
      }
    }

    &:hover {
      .add-todo-nav {
        opacity: 1;
      }
    }
  }

  .done-nav {
    padding: 20px 0;
  }
}
</style>
